﻿<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>index</title>
  <script type="text/javascript" src="../../../assets/js/shu/jquery.js"></script>
  <link rel="stylesheet" href="../../../assets/css/shu//comon0.css">
</head>

<body>
  <div class="loading">
    <div class="loadbox"> <img src="../../../assets/img/shu/loading.gif"> 页面加载中... </div>
  </div>
  <div class="head">
    <h1>赛孚可视化系统数据大屏</h1>
    <div class="time" id="showTime">2019/11/29 0:12:42</div>
    <script>
      var t = null;
      t = setTimeout(time, 1000);//開始运行
      function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        var t = null;
        document.getElementById("showTime").innerHTML = y + "/" + Appendzero(mt) + "/" + Appendzero(day) + " " + Appendzero(h) + ":" + Appendzero(m) + ":" + Appendzero(s) + "";
        function Appendzero(obj) {
          if (obj < 10) return "0" + "" + obj;
          else return obj;
        }
        t = setTimeout(time, 1000); //设定定时器，循环运行     
      }

    </script>

  </div>
  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height: calc(40% - .15rem)">
          <div class="alltitle">模块标题 </div>
          <div class="sycm">
            <ul class="clearfix">
              <li>
                <h2>1824</h2>
                <span>华东地区</span>
              </li>
              <li>
                <h2>1920</h2>
                <span>华西地区</span>
              </li>
              <li>
                <h2>19%</h2>
                <span>华南地区</span>
              </li>

              <li>
                <h2>1824</h2>
                <span>华北地区</span>
              </li>

            </ul>
          </div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: calc(60% - .15rem)">
          <div class="alltitle">模块标题</div>
          <div class="sycm sycm2">
            <ul class="clearfix">
              <li>
                <h2>1824</h2>
                <span>字段名称</span>
              </li>
              <li>
                <h2>1920</h2>
                <span>字段名称</span>
              </li>
              <li>
                <h2>19%</h2>
                <span>字段名称</span>
              </li>

              <li>
                <h2>1824</h2>
                <span>字段名称</span>
              </li>
              <li>
                <h2>19%</h2>
                <span>字段名称</span>
              </li>

              <li>
                <h2>1824</h2>
                <span>字段名称</span>
              </li>

            </ul>
          </div>
          <div class="boxfoot"></div>
        </div>

      </li>
      <li>
        <div style="position: relative">
          <div class="barnav">

            <div class="bar">
              <div class="barbox">
                <ul class="clearfix">
                  <li class="pulll_left counter">1942</li>
                  <li class="pulll_left counter">98612</li>
                  <li class="pulll_left counter">2091</li>
                </ul>
              </div>
              <div class="barbox2">
                <ul class="clearfix">
                  <li class="pulll_left">字段名称</li>
                  <li class="pulll_left">字段名称</li>
                  <li class="pulll_left">字段名称</li>
                </ul>
              </div>

            </div>
          </div>
        </div>
        <div class="mapbox">
          <div class="map">
            <div class="map1"><img src="../../../assets/img/shu/lbx.png"></div>
            <div class="map2"><img src="../../../assets/img/shu/jt.png"></div>
            <div class="map3"><img src="../../../assets/img/shu/map.png"></div>
            <div class="map4" id="map_1" style="width: 100%; height:400px; margin-left: 230px;margin-top: 15px;"></div>
          </div>
        </div>
      </li>
      <li>

        <div class="boxall" style="height: calc(50% - .15rem)">
          <div class="alltitle">字段名称 <div class="pulll_right">
              <a href="#"><span></span>已维修</a>
              <a href="#"><span></span>未维修</a>
            </div>
          </div>

          <div class="boxnav" id="echart3" style="width:100%; height:150px"></div>

          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: calc(50% - .15rem)">
          <div class="alltitle">字段名称</div>
          <div class="wrap boxnav" id="review_box" style="width:100%;height:200px;overflow:hidden;margin-top:20px;text-algin:center">
            <ul id="comment1">
              <li>
                <p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p>
              </li>
              <li>
                <p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p>
              </li>
              <li>
                <p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p>
              </li>
              <li>
                <p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p>
              </li>
              <li>
                <p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p>
              </li>
             
            </ul>
            <ul id="comment2"></ul>
          </div>
          <div class="boxfoot"></div>
        </div>
      </li>
    </ul>
    <!-- <div class="copyright">版权所有：深圳市深海时代网络科技有限公司 粤ICP备15031517号-4</div> -->
    <!-- <div id="echart" class="btn-refresh" style="height:500px;width:100%;"></div> -->
  </div>

  <div class="mainbox2">
    <ul class="clearfix">
      <li>

        <div class="boxall" style="height: 100%">
          <div class="alltitle">模块标题
            <div class="pulll_right">
              <a href="#"><span></span>已检点</a>
              <a href="#"><span></span>未检点</a>
            </div>
          </div>
          <div class="boxnav">
            <ul class="btbox">
              <li id="bt01" style="width:23%;height: 200px;"></li>
              <li id="bt02" style="width:23%;height: 200px;"></li>
              <li id="bt03" style="width:23%;height: 200px;"></li>
              <li id="bt04" style="width:23%;height: 200px;"></li>
            </ul>
          </div>
          <div class="boxfoot"></div>
        </div>

      </li>
      <li>
        <div class="boxall" style="height:100%">
          <div class="alltitle">模块标题
            <div class="pulll_right sebtn">
              <a href="#" class="active">近七天</a>
              <a href="#">近30天</a>
              <a href="#">12月</a>
            </div>
          </div>
          <div class="boxnav" id="echart4" style="width: 50;height:187px"></div>


          <div class="boxfoot"></div>
        </div>
      </li>

    </ul>
  </div>
  <script language="JavaScript" src="../../../assets/js/shu/jquery.js"></script>
  <script language="JavaScript" src="../../../assets/js/shu/js.js"></script>
  <script type="text/javascript" src="../../../assets/js/shu/echarts.min.js"></script>
  <script type="text/javascript" src="../../../assets/js/shu/china.js"></script>
  <script type="text/javascript" src="../../../assets/js/shu/area_echarts.js"></script>
  <script src="../../../assets/js/shu/jquery.liMarquee.js"></script>
  <!-- <script src="../../../assets/js/shu/test.js"></script> -->
  <script>

// function zhuruJs(url){
//         let temp=document.createElement('script');
//         temp.setAttribute('type','text/javascript');
//         temp.src=url;
//         document.head.appendChild(temp);
//     }
//     zhuruJs('../../../assets/js/shu/js.js');
//     zhuruJs('../../../../assets/js/shu/china.js');
//     zhuruJs('../../../assets/js/shu/area_echarts.js');
//     zhuruJs('../../../assets/js/shu/jquery.liMarquee.js');
    // $(function () {
    //   $('.wrap,.adduser').liMarquee({
    //     direction: 'up',//身上滚动 
    //     runshort: false,//内容不足时不滚动
    //     scrollamount: 20//速度
    //   });
    // });
   //声明的DOM对象为全局
		var ul1 = document.getElementById("comment1");
		var ul2 = document.getElementById("comment2");
		var ulbox = document.getElementById("review_box");
   
		window.onload = roll(50);

		function roll(t) {
			ul2.innerHTML = ul1.innerHTML;
			ulbox.scrollTop = 0; // 开始无滚动时设为0
			var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
			// 鼠标移入div时暂停滚动
			ulbox.onmouseover = function() {
				clearInterval(timer);
			}
			// 鼠标移出div后继续滚动
			ulbox.onmouseout = function() {
				timer = setInterval(rollStart, t);
			}
		}
		// 开始滚动函数
    var i=0;
		function rollStart() {
			// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
      // console.log(ulbox.scrollTop);
      
      i--;
      if(i==-180){
        i=50;
      }
      ul1.style.marginTop=i+'px';
      // console.log("MMMMMMM"+i);
			// if (ulbox.scrollTop >= ul1.scrollHeight) {
			// 	ulbox.scrollTop = 0;
			// } else {
        
			// 	ulbox.scrollTop++;
			// }

      
		}

  </script>


  <!-- <script type="text/javascript">
    $('.counter').countUp();
  </script> -->
</body>

</html>